<script lang="ts" setup>
  import { UserOutlined } from '@ant-design/icons-vue';
  import Avatar from '@sscd/avatar';
</script>

<template>
  <div class="demo">
    <div class="demo-title">基本</div>
    <div class="demo-content">
      <Avatar :size="64">
        <template #icon><UserOutlined /></template>
      </Avatar>
      <Avatar size="large">
        <template #icon><UserOutlined /></template>
      </Avatar>
      <Avatar>
        <template #icon><UserOutlined /></template>
      </Avatar>
      <Avatar size="small">
        <template #icon><UserOutlined /></template>
      </Avatar>
      <br />
      <br />
      <Avatar shape="square" :size="64">
        <template #icon><UserOutlined /></template>
      </Avatar>
      <Avatar shape="square" size="large">
        <template #icon><UserOutlined /></template>
      </Avatar>
      <Avatar shape="square">
        <template #icon><UserOutlined /></template>
      </Avatar>
      <Avatar shape="square" size="small">
        <template #icon><UserOutlined /></template>
      </Avatar>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .ant-avatar {
    margin-right: 12px;
  }
</style>
